<template>
  <div class="carousel-container">
    <el-carousel v-if="images.length > 0" indicator-position="outside" height="98vh">
      <el-carousel-item v-for="(img, index) in images" :key="index">
        <div class="image-wrapper">
          <!-- 菜品名称 - 左上角 -->
          <div class="dish-info">
            <div class="dish-name">{{ dishNames[index] }}</div>
          </div>

          <!-- 图片 -->
          <img :src="getFullUrl(img)" class="carousel-image">

          <!-- 描述信息 - 底部居中 -->
          <div class="image-description" v-if="descriptions[index]">
            {{ descriptions[index] }}
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
import { getCarouselByWeeklyMealId } from "../../api/canteen/carousel";

export default {
  data() {
    return {
      images: [],  // 存储图片路径
      dishNames: [], // 存储菜品名称
      descriptions: [], // 存储描述
      loading: true,
      id: null,
      checkTimer: null,
      lastTriggerTime: null // 记录上次触发的时间，避免重复调用
    };
  },
  async created() {
    this.id = Number(this.$route.query.id);
    await this.fetchData();

    this.checkTimer = setInterval(() => {
      const now = new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();
      const currentKey = `${hour}:${minute}`;

      // 目标触发时间
      const triggerTimes = ['9:0', '14:0'];
      if (this.id === 1 && hour >= 14) {
        triggerTimes.push('16:0');
      }

      // 防止重复触发：只在当前分钟第一次触发
      if (triggerTimes.includes(currentKey) && this.lastTriggerTime !== currentKey) {
        this.lastTriggerTime = currentKey;
        this.fetchData();
      }

      // 每天凌晨清空 lastTriggerTime，确保第二天可以重新触发
      if (hour === 0 && minute === 0) {
        this.lastTriggerTime = null;
      }
    }, 1000 * 300); // 每 30 秒检查一次
  },
  beforeDestroy() {
    clearInterval(this.checkTimer);
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const res = await getCarouselByWeeklyMealId(this.id);
        this.images = res.data.image?.split(';') || [];
        this.dishNames = res.data.dishName?.split(';') || [];
        this.descriptions = res.data.description?.split(';') || [];
      } catch (e) {
        console.error('获取套餐详情失败', e);
      } finally {
        this.loading = false;
      }
    },
    getFullUrl(path) {
      const baseUrl = process.env.VUE_APP_BASE_API || 'http://localhost/dev-api';
      return `${baseUrl}${path}`.replace(/([^:]\/)\/+/g, '$1');
    }
  }
};
</script>

<style scoped>
.carousel-container {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.el-carousel {
  height: 100vh !important;
}

.el-carousel__container {
  height: 100% !important;
}

.image-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden; /* 隐藏可能出现的滚动条 */
}
.el-carousel__container {
  height: 98vh !important;
  min-height: 98vh !important;
}

.carousel-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important; /* 关键属性 */
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}
/* 菜品名称样式 */
.dish-info {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  max-width: 80%;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.dish-name {
  color: #fff;
  font-size: 2em;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 描述信息样式 */
.image-description {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.4em;
  text-align: center;
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  max-width: 80%;
  line-height: 1.5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.loading {
  text-align: center;
  font-size: 20px;
}
</style>
